/**
 * @file 支付看板
 * @author ruanairuo(ruanairuo@baijia.com)
 * @date 2020-01-19
 */
import React, {useState, useEffect} from 'react';
import {Space, Card, Input, Row, Col} from 'antd';
import commonAnchor from '~/page/FineBi/common/CommonAnchor';
import {
    fetchDetail,
    downLoad
} from '~/service/shortPeriod';

import DetailModal from '../common/DetailModal';
import CommonTitle from '../common/Title';
import PartOneAndTwo from './components/partOneAndTwo';
import PartThree from './components/partThree';
import PartFour from './components/partFour';
import PartFive from './components/partFive';
import {anchorConfig} from './config.js';

import './index.styl';


const ShortPeriodClass = props => {

    const [detailData, setDetailData] = useState({});
    const [detailModalVisible, setDetailModalVisible] = useState(false);

    const handleDetail = params => {
        setDetailModalVisible(true);
        fetchDetail(params)
            .then(res => {
                setDetailData(res.data || {});
            });
    };

    const handleDownload = params => {
        const excelName = params.unitName;
        downLoad({params, excelName});
    };

    return (
        <div className="short-period-conatiner">
            <CommonTitle title="短期班行课转化" />
            <div className="short-period-content">
                <PartOneAndTwo onDetail={handleDetail} onDownLoad={handleDownload} />
                <PartThree onDetail={handleDetail} onDownLoad={handleDownload} />
                <PartFour onDetail={handleDetail} onDownLoad={handleDownload} />
                <PartFive onDetail={handleDetail} onDownLoad={handleDownload} />
            </div>
            <DetailModal
                data={detailData}
                detailModalVisible={detailModalVisible}
                onCancel={() => setDetailModalVisible(false)}
            />
        </div>
    );
};

export default commonAnchor(ShortPeriodClass, anchorConfig);
